<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        body {
            background-image: url(img/3.jpg);
            background-size: cover;
        }
        
        .all {
            width: 500px;
            height: 600px;
            margin: 50px auto;
            border: 3px solid skyblue;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .all .head h2 {
            height: 50px;
            text-align: center;
            font-size: 20px;
            color: green;
            font-family: "楷体";
            line-height: 50px;
            font-weight: bolder;
            background-color: lightskyblue;
        }
        
        .content {
            width: 100%;
            flex: 1;
            overflow-y: auto;
        }
        
        .all .content .li img {
            width: 40px;
            height: 40px;
            float: left;
        }
        
        .all .content .li {
            width: 100%;
            margin: 10px 0;
        }
        
        .content::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        
        .content::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(157, 245, 16, 0.822);
            background: #fd0ea1;
        }
        
        .content::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #ededed;
        }
        
        .all .content {
            margin-top: 12px;
            font-family: "楷体";
        }
        
        .all .content span {
            display: block;
            width: 380px;
            border-radius: 5px;
            background-color: mediumorchid;
            float: left;
            margin-left: 20px;
            text-align: center;
            line-height: 50px;
        }
        
        .all .foot {
            width: 100%;
            height: 70px;
            background-color: rgba(255, 105, 180, 0.479);
            display: flex;
            justify-content: space-evenly;
        }
        
        .all .foot input {
            width: 75%;
            height: 50px;
            box-sizing: border-box;
            margin-top: 10px;
            font-size: 20px;
            border-radius: 10px;
            outline: none;
            opacity: 0.5;
        }
        
        .all .foot #button {
            width: 20%;
            height: 50px;
            box-sizing: border-box;
            margin-top: 10px;
            border-radius: 10px;
            outline: none;
            background-color: aqua;
            opacity: 0.5;
            font-size: 20px;
        }
        
        .user {
            width: 100%;
            display: flex;
            text-align: left;
            flex-direction: row-reverse;
        }
        
        .user img {
            width: 40px;
            height: 40px;
            float: right;
        }
        
        .user span {
            display: block;
            width: 300px;
            border-radius: 5px;
            background-color: mediumorchid;
            float: right;
            margin-left: 20px;
            margin-right: 20px;
            display: flex;
            text-align: left;
            text-align: center;
            line-height: 50px;
        }
        
        .li {
            display: flex;
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="head">
            <h2>快来和大雄聊天吧</h2>
        </div>
        <div class="content">
            <ul>
                <li class="li">
                    <img src="img/1.jpg" alt="">
                    <span class="span">你好！我是大雄，我在等静香，你知道她在哪里吗？</span>
                </li>
            </ul>
        </div>
        <div class="foot">
            <input type="text">
            <button id="button">发送</button>
        </div>

    </div>
</body>

</html>
<script>
    let ul = document.querySelector("ul");
    let input = document.querySelector("input")
    let button = document.getElementById("button");
    let content = document.querySelector(".content");
    let span = document.querySelector("span");
    // 绑定按钮
    button.onclick = function() {
            let http = new XMLHttpRequest();
            http.open("get", "http://10.35.164.168/chat.php?message=" + input.value);
            http.send();
            http.onreadystatechange = function() {
                if (http.readyState === 4 && http.status === 200) {
                    get(http.responseText);
                }
            }

            if (input.value.length <= 14) {
                ul.innerHTML = ul.innerHTML + `<li class='user'>
                 <img src='img/2.jpg'>
                 <span style='width:${(input.value.length)*20+30}px;'>${input.value}
                 </span></li>`;
            } else {
                ul.innerHTML += `
                <li class="user">
                    <img src="img/2.jpg">
                    <span>${input.value}</span>
                </li>`;
            }
            content.scrollTop = content.scrollHeight;
            input.value = "";
        }
        //按下enter键发送数据
        // 事件委托
    document.body.onkeydown = function(evt) {
        let e = evt || event;

        let target = e.target || e.srcElement;
        // 获取发生事件的元素
        if (evt.keyCode === 13) {
            let http = new XMLHttpRequest();
            http.open("get", "http://10.35.164.168/chat.php?message=" + input.value);
            http.send();
            http.onreadystatechange = function() {
                if (http.readyState === 4 && http.status === 200) {
                    get(http.responseText);
                }
            }
            if (input.value.length <= 14) {
                ul.innerHTML = ul.innerHTML + `<li class='user'>
                 <img src='img/2.jpg'>
                 <span style='width:${(input.value.length)*20+30}px;'>${input.value}
                 </span></li>`;
            } else {
                ul.innerHTML += `
                <li class="user">
                    <img src="img/2.jpg">
                    <span>${input.value}</span>
                </li>`;
            }
            content.scrollTop = content.scrollHeight;
            input.value = "";

        }
    }

    function get(responseText) {
        let arr = JSON.parse(responseText);
        let target = arr.content.replace(/{br}/g, '<br>');
        if (arr.content.length <= 14) {
            ul.innerHTML = ul.innerHTML + `<li class='li'>
                 <img src='img/1.jpg'>
                 <span style='width:${(arr.content.length)*20+30}px;'>${target}
                 </span></li>`;
        } else {
            ul.innerHTML += `
                <li class="li">
                    <img src="img/1.jpg">
                    <span>${target}</span>
                </li>`;
        }
        content.scrollTop = content.scrollHeight;


    }
</script>